Bí Mật Của React: Phân Tích Sâu Về Thuật Toán Reconciliation và So Sánh DOM Ảo

` đơn giản có thể được biểu diễn như sau:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

Bởi vì chúng chỉ là các đối tượng JavaScript, việc tạo và thao tác với chúng cực kỳ nhanh. Nó không liên quan đến bất kỳ tương tác nào với API của trình duyệt, vì vậy không có reflow hay repaint.

DOM Ảo Hoạt Động Như Thế Nào?

VDOM cho phép một cách tiếp cận khai báo (declarative) để phát triển UI. Thay vì nói cho trình duyệt cách thay đổi DOM từng bước một (mệnh lệnh - imperative), bạn chỉ cần khai báo UI nên trông như thế nào với một state nhất định (khai báo - declarative). React sẽ xử lý phần còn lại.

Quá trình này diễn ra như sau:

1. Render ban đầu: Khi ứng dụng của bạn tải lần đầu, React tạo ra một cây DOM ảo hoàn chỉnh cho UI của bạn và sử dụng nó để tạo ra DOM thật ban đầu.
2. Cập nhật State: Khi state của ứng dụng thay đổi (ví dụ: người dùng nhấp vào một nút), React tạo ra một cây DOM ảo mới phản ánh state mới.
3. So sánh (Diffing): React bây giờ có hai cây DOM ảo trong bộ nhớ: cây cũ (trước khi thay đổi state) và cây mới. Sau đó, nó chạy thuật toán "so sánh" (diffing) để so sánh hai cây này và xác định chính xác những khác biệt.
4. Gom nhóm và Cập nhật: React tính toán tập hợp các thao tác hiệu quả và tối thiểu nhất cần thiết để cập nhật DOM thật khớp với DOM ảo mới. Các thao tác này được gom lại với nhau và áp dụng vào DOM thật trong một chuỗi duy nhất, đã được tối ưu hóa.

Bằng cách gom nhóm các cập nhật, React giảm thiểu tương tác trực tiếp với DOM chậm chạp, cải thiện đáng kể hiệu suất. Cốt lõi của hiệu quả này nằm ở bước "so sánh", được gọi chính thức là thuật toán Reconciliation.

Trái Tim Của React: Thuật Toán Reconciliation

Reconciliation là quá trình mà qua đó React cập nhật DOM để khớp với cây component mới nhất. Thuật toán thực hiện việc so sánh này được chúng ta gọi là "thuật toán so sánh" (diffing algorithm).

Về mặt lý thuyết, việc tìm ra số lượng biến đổi tối thiểu để chuyển đổi một cây này thành một cây khác là một vấn đề rất phức tạp, với độ phức tạp thuật toán vào khoảng O(n³), trong đó n là số lượng nút trong cây. Điều này sẽ quá chậm đối với các ứng dụng trong thế giới thực. Để giải quyết vấn đề này, đội ngũ của React đã đưa ra một số quan sát xuất sắc về cách các ứng dụng web thường hoạt động và đã triển khai một thuật toán heuristic nhanh hơn nhiều—hoạt động trong thời gian O(n).

Các Heuristic: Giúp Việc So Sánh Nhanh và Dễ Dự Đoán

Thuật toán so sánh của React được xây dựng dựa trên hai giả định hoặc heuristic chính:

Heuristic 1: Các Loại Phần Tử Khác Nhau Tạo Ra Các Cây Khác Nhau

Đây là quy tắc đầu tiên và đơn giản nhất. Khi so sánh hai nút VDOM, React trước tiên sẽ xem xét loại của chúng. Nếu loại của các phần tử gốc khác nhau, React giả định rằng nhà phát triển không muốn cố gắng chuyển đổi cái này thành cái kia. Thay vào đó, nó thực hiện một cách tiếp cận quyết liệt hơn nhưng có thể dự đoán được:

• Nó phá bỏ toàn bộ cây cũ, unmount tất cả các component cũ và hủy trạng thái của chúng.
• Nó xây dựng một cây hoàn toàn mới từ đầu dựa trên loại phần tử mới.

Ví dụ, hãy xem xét thay đổi này:

Trước: <div><Counter /></div>
Sau: <span><Counter /></span>

Mặc dù component con `Counter` là như nhau, React thấy rằng gốc đã thay đổi từ `div` thành `span`. Nó sẽ unmount hoàn toàn `div` cũ và instance `Counter` bên trong nó (làm mất state) và sau đó mount một `span` mới và một instance hoàn toàn mới của `Counter`.

Lưu ý chính: Tránh thay đổi loại phần tử gốc của một cây con component nếu bạn muốn bảo toàn state của nó hoặc tránh việc render lại toàn bộ cây con đó.

Heuristic 2: Nhà Phát Triển Có Thể Gợi Ý Các Phần Tử Ổn Định Bằng Thuộc Tính `key`

Đây được cho là heuristic quan trọng nhất mà các nhà phát triển cần hiểu và áp dụng đúng cách. Khi React so sánh một danh sách các phần tử con, hành vi mặc định của nó là lặp qua cả hai danh sách con cùng một lúc và tạo ra một sự thay đổi ở bất cứ đâu có sự khác biệt.

Vấn đề với việc so sánh dựa trên chỉ số (index)

Hãy tưởng tượng chúng ta có một danh sách các mục và chúng ta thêm một mục mới vào đầu danh sách mà không sử dụng key.

Danh sách ban đầu:

• Mục B
• Mục C

Danh sách cập nhật (thêm 'Mục A' vào đầu):

• Mục A
• Mục B
• Mục C

Không có key, React thực hiện một phép so sánh đơn giản dựa trên chỉ số:

1. Nó so sánh mục cũ ở chỉ số 0 ('Mục B') với mục mới ở chỉ số 0 ('Mục A'). Chúng khác nhau, vì vậy nó thay đổi mục đầu tiên.
2. Nó so sánh mục cũ ở chỉ số 1 ('Mục C') với mục mới ở chỉ số 1 ('Mục B'). Chúng khác nhau, vì vậy nó thay đổi mục thứ hai.
3. Nó thấy có một mục mới ở chỉ số 2 ('Mục C') và chèn nó vào.

Điều này rất kém hiệu quả. React đã thực hiện hai thay đổi không cần thiết và một lần chèn, trong khi tất cả những gì cần thiết chỉ là một lần chèn duy nhất ở đầu. Nếu các mục danh sách này là các component phức tạp có state riêng, điều này có thể dẫn đến các vấn đề nghiêm trọng về hiệu suất và lỗi, vì state có thể bị lẫn lộn giữa các component.

Sức mạnh của thuộc tính `key`

Thuộc tính `key` cung cấp một giải pháp. Đó là một thuộc tính chuỗi đặc biệt bạn cần bao gồm khi tạo danh sách các phần tử. Keys cung cấp cho React một định danh ổn định cho mỗi phần tử.

Hãy xem lại ví dụ tương tự, nhưng lần này với các key ổn định, duy nhất:

Danh sách ban đầu:

• Mục B
• Mục C

Danh sách cập nhật:

• Mục A
• Mục B
• Mục C

Bây giờ, quá trình so sánh của React thông minh hơn nhiều:

1. React nhìn vào các con của danh sách mới và tìm thấy các phần tử có key 'b' và 'c'.
2. Nó biết rằng các phần tử có key 'b' và 'c' đã tồn tại trong danh sách cũ, vì vậy nó chỉ cần di chuyển chúng.
3. Nó thấy rằng có một phần tử mới với key 'a' chưa tồn tại trước đó, vì vậy nó tạo và chèn nó vào.

Điều này hiệu quả hơn nhiều. React xác định chính xác rằng nó chỉ cần thực hiện một lần chèn. Các component liên quan đến các key 'b' và 'c' được bảo toàn, duy trì trạng thái nội bộ của chúng.

Quy tắc quan trọng cho Keys: Keys phải ổn định, có thể dự đoán và duy nhất trong số các anh chị em của nó. Sử dụng chỉ số mảng làm key (`items.map((item, index) =>

...

)`) là một anti-pattern nếu danh sách có thể được sắp xếp lại, lọc, hoặc có các mục được thêm/xóa khỏi giữa, vì nó dẫn đến các vấn đề tương tự như không có key. Các key tốt nhất là các định danh duy nhất từ dữ liệu của bạn, như ID cơ sở dữ liệu.

Sự Tiến Hóa: Từ Stack đến Kiến trúc Fiber

Thuật toán reconciliation được mô tả ở trên là nền tảng của React trong nhiều năm. Tuy nhiên, nó có một hạn chế lớn: nó đồng bộ và chặn luồng. Việc triển khai ban đầu này hiện được gọi là Stack Reconciler.

Cách Cũ: Stack Reconciler

Trong Stack Reconciler, khi một cập nhật state kích hoạt một lần render lại, React sẽ duyệt đệ quy toàn bộ cây component, tính toán các thay đổi và áp dụng chúng vào DOM—tất cả trong một chuỗi duy nhất, không bị gián đoạn. Đối với các cập nhật nhỏ, điều này vẫn ổn. Nhưng đối với các cây component lớn, quá trình này có thể mất một khoảng thời gian đáng kể (ví dụ: hơn 16ms), chặn luồng chính của trình duyệt. Điều này sẽ khiến UI trở nên không phản hồi, dẫn đến việc bỏ lỡ khung hình, hoạt ảnh giật cục và trải nghiệm người dùng kém.

Giới Thiệu React Fiber (React 16+)

Để giải quyết vấn đề này, đội ngũ React đã thực hiện một dự án kéo dài nhiều năm để viết lại hoàn toàn thuật toán reconciliation cốt lõi. Kết quả, được phát hành trong React 16, được gọi là React Fiber.

Kiến trúc Fiber được thiết kế từ đầu để cho phép tính đồng thời (concurrency)—khả năng React làm việc trên nhiều tác vụ cùng một lúc và chuyển đổi giữa chúng dựa trên mức độ ưu tiên.

Một "fiber" là một đối tượng JavaScript đơn giản đại diện cho một đơn vị công việc. Nó chứa thông tin về một component, đầu vào của nó (props) và đầu ra của nó (children). Thay vì duyệt đệ quy không thể bị gián đoạn, React giờ đây xử lý một danh sách liên kết các nút fiber, từng cái một.

Kiến trúc mới này đã mở khóa một số khả năng chính:

• Render tăng dần: Nó có thể chia công việc render thành các phần nhỏ và trải đều chúng qua nhiều khung hình.
• Ưu tiên hóa: Nó có thể gán các mức độ ưu tiên khác nhau cho các loại cập nhật khác nhau. Ví dụ, việc người dùng gõ vào một trường nhập liệu có độ ưu tiên cao hơn so với dữ liệu đang được tìm nạp ở chế độ nền.
• Khả năng tạm dừng và hủy bỏ: Nó có thể tạm dừng công việc trên một bản cập nhật có độ ưu tiên thấp để xử lý một bản cập nhật có độ ưu tiên cao, và thậm chí có thể hủy bỏ hoặc tái sử dụng công việc không còn cần thiết.

Hai Giai Đoạn Của Fiber

Dưới kiến trúc Fiber, quá trình render được chia thành hai giai đoạn riêng biệt:

1. Giai đoạn Render/Reconciliation (Bất đồng bộ): Trong giai đoạn này, React xử lý các nút fiber để xây dựng một cây "đang trong quá trình xử lý" (work-in-progress). Nó gọi các phương thức `render` của component và chạy thuật toán so sánh để xác định những thay đổi cần được thực hiện đối với DOM. Điều quan trọng là giai đoạn này có thể bị gián đoạn. React có thể tạm dừng công việc này để xử lý một việc quan trọng hơn và tiếp tục lại sau. Bởi vì nó có thể bị gián đoạn, React không áp dụng bất kỳ thay đổi DOM thực tế nào trong giai đoạn này để tránh trạng thái UI không nhất quán.
2. Giai đoạn Commit (Đồng bộ): Khi cây đang trong quá trình xử lý hoàn tất, React bước vào giai đoạn commit. Nó lấy các thay đổi đã được tính toán và áp dụng chúng vào DOM thật. Giai đoạn này là đồng bộ và không thể bị gián đoạn. Điều này đảm bảo rằng người dùng luôn thấy một UI nhất quán. Các phương thức vòng đời như `componentDidMount` và `componentDidUpdate`, cũng như các hook `useLayoutEffect` và `useEffect`, được thực thi trong giai đoạn này.

Kiến trúc Fiber là nền tảng cho nhiều tính năng hiện đại của React, bao gồm `Suspense`, concurrent rendering, `useTransition`, và `useDeferredValue`, tất cả đều giúp các nhà phát triển xây dựng giao diện người dùng phản hồi và mượt mà hơn.

Các Chiến Lược Tối Ưu Hóa Thực Tế Cho Nhà Phát Triển

Hiểu được quy trình reconciliation của React giúp bạn có khả năng viết mã hiệu suất hơn. Dưới đây là một số chiến lược có thể hành động:

1. Luôn Sử Dụng Keys Ổn Định và Duy Nhất cho Danh Sách

Điều này không thể được nhấn mạnh đủ. Đây là tối ưu hóa quan trọng nhất cho danh sách. Sử dụng một ID duy nhất từ dữ liệu của bạn (ví dụ: `product.id`). Tránh sử dụng chỉ số mảng trừ khi danh sách hoàn toàn tĩnh và sẽ không bao giờ thay đổi.

2. Tránh Render Lại Không Cần Thiết

Một component sẽ render lại nếu state của nó thay đổi hoặc component cha của nó render lại. Đôi khi, một component render lại ngay cả khi đầu ra của nó sẽ giống hệt nhau. Bạn có thể ngăn chặn điều này bằng cách sử dụng:

• `React.memo()`: Một component bậc cao (higher-order component) cho các function component. Nó thực hiện một phép so sánh nông (shallow comparison) các props của component. Nếu các props không thay đổi, React sẽ bỏ qua việc render lại component và tái sử dụng kết quả render cuối cùng.
• `useCallback()`: Các hàm được định nghĩa bên trong một component sẽ được tạo lại trên mỗi lần render. Nếu bạn truyền các hàm này xuống dưới dạng props cho một component con được bọc trong `React.memo`, component con sẽ render lại vì prop hàm về mặt kỹ thuật là một hàm mới mỗi lần. `useCallback` ghi nhớ (memoize) chính hàm đó, đảm bảo nó chỉ được tạo lại nếu các phụ thuộc của nó thay đổi.
• `useMemo()`: Tương tự như `useCallback`, nhưng dành cho các giá trị. Nó ghi nhớ kết quả của một phép tính tốn kém. Phép tính chỉ được chạy lại nếu một trong các phụ thuộc của nó đã thay đổi. Điều này hữu ích để ngăn chặn các tính toán tốn kém trên mỗi lần render và để duy trì các tham chiếu đối tượng/mảng ổn định được truyền dưới dạng props.

3. Bố Cục Component Thông Minh

Cách bạn cấu trúc các component của mình có thể có tác động đáng kể đến hiệu suất. Nếu một phần state của component của bạn cập nhật thường xuyên, hãy cố gắng tách nó ra khỏi các phần không cập nhật.

Ví dụ, thay vì có một component lớn duy nhất trong đó một trường nhập liệu thay đổi thường xuyên khiến toàn bộ component phải render lại, hãy nâng state đó lên component nhỏ hơn của riêng nó. Bằng cách này, chỉ có component nhỏ đó render lại khi người dùng gõ.

4. Ảo Hóa (Virtualize) Các Danh Sách Dài

Nếu bạn cần render các danh sách có hàng trăm hoặc hàng nghìn mục, ngay cả với các key phù hợp, việc render tất cả chúng cùng một lúc có thể chậm và tiêu tốn nhiều bộ nhớ. Giải pháp là virtualization hoặc windowing. Kỹ thuật này chỉ render một tập hợp nhỏ các mục hiện đang hiển thị trong khung nhìn (viewport). Khi người dùng cuộn, các mục cũ sẽ được unmount và các mục mới sẽ được mount. Các thư viện như `react-window` và `react-virtualized` cung cấp các component mạnh mẽ và dễ sử dụng để triển khai mẫu này.

Kết Luận

Hiệu suất của React không phải là một sự tình cờ; đó là kết quả của một kiến trúc tinh vi và có chủ ý, tập trung vào DOM ảo và một thuật toán Reconciliation hiệu quả. Bằng cách trừu tượng hóa việc thao tác DOM trực tiếp, React có thể gom nhóm và tối ưu hóa các cập nhật theo cách mà việc quản lý thủ công sẽ vô cùng phức tạp.

Với tư cách là nhà phát triển, chúng ta là một phần quan trọng của quá trình này. Bằng cách hiểu các heuristic của thuật toán so sánh—sử dụng key đúng cách, ghi nhớ các component và giá trị, và cấu trúc ứng dụng của chúng ta một cách chu đáo—chúng ta có thể làm việc cùng với bộ reconciler của React, chứ không phải chống lại nó. Sự tiến hóa lên kiến trúc Fiber đã đẩy xa hơn nữa ranh giới của những gì có thể, cho phép một thế hệ UI mượt mà và phản hồi mới.

Lần tới khi bạn thấy UI của mình cập nhật ngay lập tức sau khi thay đổi state, hãy dành một chút thời gian để đánh giá cao vũ điệu tao nhã của DOM ảo, thuật toán so sánh và giai đoạn commit đang diễn ra ngầm bên dưới. Sự hiểu biết này là chìa khóa để bạn xây dựng các ứng dụng React nhanh hơn, hiệu quả hơn và mạnh mẽ hơn cho khán giả toàn cầu.